<template>
  <div class="editor" style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 400px; overflow-y: hidden"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
    />
  </div>
</template>

<script>
import Cookies from 'js-cookie';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
export default {
  name: 'editor',
  components: {},
  data() {
    return {
      editor: null,
      html: '',
      toolbarConfig: {},
      editorConfig: {
        placeholder: this.$t('add.add148'),
        MENU_CONF: {
          uploadImage: {
            fieldName: 'file',
            server: window.SITE_CONFIG['apiURL'] + '/cloudplatformlogcontent/uploadFile',
            // server:
            //   'http://192.168.1.123:8090/renren-admin' + '/cloudplatformlogcontent/uploadFile',
            headers: {
              Token: Cookies.get('token'),
            },
            onSuccess(file, res) {
              // TS 语法
              // onSuccess(file, res) {          // JS 语法
             
            },
            // customUpload(file, insertFn) {
            //   const reader = new FileReader();
            //   reader.onload = function (e) {
            //     // 当文件读取完成
            //     const data = e.target.result;

            //     // 此时的data就是图片的base64
            //     insertFn(data); // 调用callback将base64传递给编辑器
            //   };
            //   reader.readAsDataURL(file);
            // },
            customInsert(res, insertFn) {
              insertFn(res.data);
            },
          },
        },
      },
      mode: 'default', // or 'simple',
    };
  },
  components: { Editor, Toolbar },

  mounted() {},

  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor);
    },
    onChange(editor) {
      console.log('onChange', editor.children);
    },
    onDestroyed(editor) {
      console.log('onDestroyed', editor);
    },
    onMaxLength(editor) {
      console.log('onMaxLength', editor);
    },
    onFocus(editor) {
      console.log('onFocus', editor);
    },
    onBlur(editor) {
      console.log('onBlur', editor);
    },
    customAlert(info, type) {
      window.alert(`customAlert in Vue demo\n${type}:\n${info}`);
    },
    customPaste(editor, event, callback) {
      console.log('ClipboardEvent 粘贴事件对象', event);
      // const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
      // const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
      // const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）

      // 自定义插入内容
      editor.insertText('xxx');

      // 返回 false ，阻止默认粘贴行为
      event.preventDefault();
      callback(false); // 返回值（注意，vue 事件的返回值，不能用 return）

      // 返回 true ，继续默认的粘贴行为
      // callback(true)
    },
    getHtml() {
      return this.editor.getHtml();
    },
    setHtml(htmlStr) {
      if (this.editor && htmlStr) {
        this.editor.setHtml(htmlStr);
      }
    },
    customInsert(insertImg, result) {},
  },
};
</script>

<style lang="scss" scoped>
.w-e-full-screen-container {
  z-index: 99999;
}
</style>
